/*
 * Copyright 2021 ThoughtWorks, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import "../../global/common";
@import "../../components/hierarchy/tree.scss";

$inline-radius:        4px;
$inline-spacing:       20px;
$arrow-size:           6px;
$arrow-horiz:          ($arrow-size + $inline-spacing) / 2;
$stage-color:          #4ad9d9;
$fg-color:             #023550;
$label-color-group:    #dee;
$label-color-pipeline: #ede7f3;
$label-color-env:      #ffe099;

@mixin type-label {
  display:          inline-block;
  font-weight:      normal;
  line-height:      1.5em;
  margin-right:     $arrow-size;
  text-transform:   uppercase;
  padding:          0 5px;
  border-radius:    2px;
}

.loading {
  padding: 10px 0;
  font-size: 18px;
}

.spin {
  @include icon-before($type: $fa-var-spinner, $margin: 0);
  display:      inline-block;
  margin-right: 10px;
  animation: rotate 1s linear infinite;

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(359deg);
    }
  }
}

.group {
  color: $fg-color;

  .group-datum {
    &:before {
      @include type-label;

      content:          "Group:";
      background-color: $label-color-group;
    }
  }
}

.environment {
  color: $fg-color;

  .environment-datum {
    &:before {
      @include type-label;

      content:          "Environment:";
      background-color: $label-color-env;
    }
  }
}

.tree {
  color: $fg-color;

  a, a:visited {
    text-decoration: none;
    color: $link-color;
  }

  a:hover, a:visited {
    text-decoration: none;
    color: $link-hover-color;
  }
}

.pipeline {
  .pipeline-datum {
    display: inline-block;
    padding: 0 5px;

    &:before {
      @include type-label;

      content:          "Pipeline:";
      background-color: $label-color-pipeline;
    }
  }
}

